<template>
    <div class="home-page">

        <div class="banner">
            <div class="container">
                <h1 class="logo-font">conduit</h1>
                <p>A place to share your knowledge.</p>
            </div>
        </div>

        <div class="container page">
            <div class="row">

                <div class="col-md-9">
                    <div class="feed-toggle">
                        <ul class="nav nav-pills outline-active">
                            <li v-if="user" class="nav-item">
                                <nuxt-link class="nav-link" 
                                    :class="{
                                        active: tab === 'your_feed'
                                    }"
                                    exact
                                    :to="{
                                        name: 'home',
                                        query: {
                                            tab: 'your_feed'
                                        }
                                    }"
                                >Your Feed</nuxt-link>
                            </li>
                            <li class="nav-item">
                               <nuxt-link class="nav-link" 
                                    :class="{
                                        active: tab === 'global_feed'
                                    }"
                                    exact
                                    :to="{
                                        name: 'home'
                                    }"
                                >Global Feed</nuxt-link>
                            </li>
                            <li v-if="tag" class="nav-item">
                                <nuxt-link class="nav-link" 
                                    :class="{
                                        active: tab === 'tag'
                                    }"
                                    exact
                                    :to="{
                                        name: 'home',
                                        query: {
                                            tab: 'tag',
                                            tag: tag
                                        }
                                    }"
                                ># {{ tag }}</nuxt-link>
                            </li>
                        </ul>
                    </div>

                    <div class="article-preview" v-for="article in articles" :key="article.slug">
                        <div class="article-meta">
                            <nuxt-link :to="{
                                name: 'profile',
                                params: {
                                    username: article.author.username
                                }
                                }">
                                <img :src="article.author.image" />
                            </nuxt-link>
                            <div class="info">
                                <nuxt-link  class="author" :to="{
                                    name: 'profile',
                                    params: {
                                        username: article.author.username
                                    }
                                    }">
                                    {{ article.author.username }}
                                </nuxt-link>
                                <span class="date">{{ article.createdAt | date('MMM DD, YYYY') }}</span>
                            </div>
                            <button class="btn btn-outline-primary btn-sm pull-xs-right" :class="{active:article.favorited}" @click="onFavorite(article)" :disabled="article.favoriteDisabled">
                                <i class="ion-heart"></i> {{article.favoritesCount}}
                            </button>
                        </div>
                        <nuxt-link 
                            class="preview-link"
                            :to="{
                                name: 'article',
                                params: {
                                    slug: article.slug
                                }
                            }">
                            <h1>{{ article.title }}</h1>
                            <p>{{ article.description }}</p>
                            <span>Read more...</span>
                        </nuxt-link>
                    </div>

                    <!-- 分页列表 -->
                    <nav>
                        <ul class="pagination">
                            <!-- ngRepeat: pageNumber in $ctrl.pageRange($ctrl.totalPages) -->
                            <li class="page-item" :class="{ active: item === page }" v-for="item in tatalPage" :key="item">
                                <nuxt-link class="page-link" 
                                    :to="{
                                        name: 'home',
                                        query:{
                                            page:item,
                                            tag: $route.query.tag,
                                            tab: tab
                                        }
                                    }"
                                >{{ item }}</nuxt-link>
                            </li>
                        </ul>
                    </nav>
                    <!-- /分页列表 -->

                </div>

                <div class="col-md-3">
                    <div class="sidebar">
                        <p>Popular Tags</p>

                        <div class="tag-list">
                            <nuxt-link  class="tag-pill tag-default"
                                :to="{
                                    name: 'home',
                                    query: {
                                        tab: 'tag',
                                        tag: item
                                    }
                                }" 
                            v-for="item in tags" :key="item">{{item}}</nuxt-link>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>

<script>
    import { getArticles, getYourFeedArticles, addFavorite, deteleFavorite } from '../api/article'
    import { getTags } from '../api/tag'
    import { mapState } from 'vuex'

    export default {
        watchQuery: ['page', 'tag', 'tab'],
        name: "HomeIndex",
        async asyncData ({ query }) {
            const page = Number.parseInt(query.page || 1)
            const limit = 20
            const tab = query.tab || 'global_feed'
            const tag = query.tag
            const loadArticles = tab === 'your_feed' ? getYourFeedArticles : getArticles
            const [ articleRes, tagRes ] = await Promise.all([
                loadArticles({
                    limit,
                    offset: (page - 1) * limit,
                    tag
                }),
                getTags()
            ])

            const { articles, articlesCount } = articleRes.data
            const { tags } = tagRes.data

            articles.forEach(article => article.favoriteDisabled = false)

            return {
                articles, // 文章列表
                articlesCount, // 文章总数
                tags, // 标签列表
                page, // 每页数量
                limit, // 页面
                tab,  // 选项卡
                tag // 数据标签
            }
        },
        computed: {
            ...mapState(['user']),
            tatalPage () {
                return Math.ceil(this.articlesCount / this.limit)
            }
        },
        methods: {
            async onFavorite (article) {
                article.favoriteDisabled = true
                if (article.favorited) {
                    // 取消点赞
                    await deteleFavorite(article.slug)
                    article.favorited = false
                    article.favoritesCount -= 1
                } else {
                    // 添加点赞
                    console.log(article.slug)
                    await addFavorite(article.slug)
                    article.favorited = true
                    article.favoritesCount += 1
                }
                article.favoriteDisabled = false
            }
        },
    }
</script>

<style scoped>

</style>